<template>
    <el-form :model="form" ref="mform" :rules="rules"
             style="min-width:500px;" :label-width="formLabelWidth" size="small"
             v-loading.fullscreen.lock="loading">
        <el-form-item label="页面名" prop="page_name">
            <el-input v-model="form.page_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面URL" prop="url">
            <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面模板" prop="view">
            <el-input v-model="form.view" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="页面描述" prop="page_desc">
            <el-input v-model="form.page_desc" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label-width="0px" style="text-align: center;">
            <el-button type="primary" @click="submit()">确 定</el-button>
            <el-button @click="close()">取 消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { mapState, mapActions } from 'vuex';
    // import perfectScrollbar from 'vue-perfect-scrollbar'
    import axios from 'axios';
    import _ from 'lodash';
    import moment from 'moment';

    export default {
        props: [ 'show', 'modId', 'view' ],
        data() {
            return {
                formLabelWidth: '120px',
                loading: false,

                form: {
                    page_name: '',
                    url: '',
                    page_desc: '',
                    view: '',
                },
                rules: {
                    page_name: [
                        { required: true, message: '请输入页面名称', trigger: 'blur' }
                    ],
                    url: [
                        { required: true, message: '请输入页面URL', trigger: 'blur' }
                    ]
                },
            }
        },
        components: {

        },
        created: function () {
            // this.pid = this.$route.query.pid;
        },
        mounted: function () {
            this.init();
        },
        watch: {
            '$route' (to, from) {
                // this.groupId = this.$route.params.groupId;
                // this.refresh();
            },
            'show'(val) {

                // console.log("role create show change ... ", val);
                if(val) {
                    this.init();
                }
            },
            'selectedMenus'(val) {
                // console.log(`======> selectedMenus: ` + val);
            }
        },
        filters: {

        },
        computed: mapState([
            /*'mainMenu',
             'menuHide'*/
            'loginUser'
        ]),
        methods: {
            ...mapActions([
            ]),
            init() {

                this.resetForm();

                if(this.modId) {
                    this.$refs.mform && this.$refs.mform.resetFields();

                    axios.get('/mgr/api/page/web/view', {
                        params: {
                            page_id: this.modId
                        }
                    })
                    .then(({ data }) => {
                        this.form = data;
                    })
                    .catch(error => {
                        this.$message('操作失败，请稍后再试！');
                    });
                }
            },
            resetForm() {
                this.form = {
                    page_name: '',
                    url: '',
                    page_desc: '',
                    view: '',
                };
            },
            submit() {
                this.$refs.mform.validate((valid) => {
                    if (valid) {
                        this._submit();
                    } else {
                        return false;
                    }
                });
            },
            _submit() {
                let url;

                if(this.modId && this.form.page_id) {
                    url = '/mgr/api/page/web/update';
                } else {
                    url = '/mgr/api/page/web/create';
                }

                this.loading = true;

                axios.post(url, this.form)
                    .then(({data}) => {
                        this.loading = false;
                        this.close(true);
                        this.$message('操作成功！');
                    })
                    .catch((error) => {
                        this.loading = false;
                        this.$alert('操作失败，请稍后再试！');
                    })
            },
            close(flag) {
                this.$emit('close', flag);
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .role-menu-wrap {
        display: flex;

        .role-menu-item {
            margin-right:10px;

            h6 {
                font-size: 13px;
                color: #999;
                /*padding:10px;*/
                padding-bottom:5px;
                margin:0px;
                font-style: normal;
                font-weight:normal;
            }
            &.border {
                border: 1px solid #EEE;
            }
        }
        .role-menu-tree{
            height:350px;
            max-height: 500px;
            width:300px;
            overflow:auto;
            border: 1px solid #EEE;

            .role-custom-tree-node {
                .el-checkbox {
                    margin-right:5px;
                }
            }
        }
        .role-menu-actions {
            min-height:350px;
            border: 1px solid #EEE;
            padding: 5px 10px;
        }

        .role-menu-access {
            border-top: 1px solid #EEE;
            .disabled {
                color: #999;
            }
            .el-table .cell {
                padding-left:0px;
                padding-right:0px;
            }
        }
        .role-menu-label {
            font-size:12px;
            color: #CCC;
        }
    }

    .el-form .el-form-item {
        margin-bottom:10px;
    }
    .role-menu-access .el-form-item {
        margin-bottom:0px;

        .el-checkbox {
            margin-bottom:0px;
        }
    }
</style>
<style lang="scss">
    /*.role-menu-access {
        .el-table .cell {
            padding-left:5px;
            padding-right:5px;
        }
    }*/
</style>
